<template>
    <div id="search">
        <div>
            <div>
                <i class="fa fa-search"></i>
                <input type="text">
            </div>
        </div>
        <h3>电影/电视剧/综艺</h3>
        <ul>
            <li>
                <div>
                    <img src="/images/001.png">
                </div>
                <div>
                    <p>机械师2</p>
                    <p>剧情，喜剧，犯罪</p>
                    <p>2020-6-30</p>
                </div>
                <div>8.9</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'Search'
}
</script>
<style scoped>
    #search{
        padding-top: 50px;
		padding-bottom: 50px;
    }
    #search>div{
        background-color: #f5f5f5;
        padding: 10px;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 2px;
    }
    #search>div div{
        background-color: white;
        border-radius: 5px;
        border: 1px solid #e6e6e6;
    }
    input{
        border: none;
        outline: none;
        padding: 5px 0px;
		width: 80%;
    }
    i{
        padding: 0px 10px;
    }
    h3{
        color: #999;
        padding: 10px;
        border-bottom: 1px solid #e6e6e6;
        font-size: 18px;
    }
    img{
        width: 64px;
    }
    li div{
        float: left;
    }
    li div:last-child{
        float: right;
        font-size: 18px;
        color: #fc7103;
    }
    li{
        padding: 10px;
        overflow: hidden;
        border-bottom: 1px dashed #e6e6e6;
    }
    li div:nth-of-type(2){
        margin-left: 10px;
    }
    p{
        font-size: 14px;
        line-height: 27px;
    }
    p:first-child{
        font-size: 20px;
    }
</style>